<template>
  <div>
    <div style="margin-bottom: 10px" v-if="quickCheck&&isDetail">
      维保项目快选：
      <el-checkbox :value="A1" @change="checkChange('A1',$event)">A1</el-checkbox>
      <el-checkbox :value="A2" @change="checkChange('A2',$event)">A2</el-checkbox>
      <el-checkbox :value="A3" @change="checkChange('A3',$event)">A3</el-checkbox>
      <el-checkbox :value="A4" @change="checkChange('A4',$event)">A4</el-checkbox>
    </div>
    <div class="inspection">
      <div class="inspection-item">
        <div class="item-title">{{ titleMap[0] }}</div>
        <check-list
          class="check-scroll customScrollBar"
          :options="options1"
          :checked="checked1"
          :isShowCheck="isDetail"
          :level="1"
          @changeChecked="changeChecked"
          :type='type'
        ></check-list>
      </div>
      <div class="inspection-item">
        <div class="item-title">{{ titleMap[1] }}</div>
        <check-list
          class="check-scroll customScrollBar"
          :options="options2"
          :checked="checked2"
          :isShowCheck="isDetail"
          :level="2"
          @changeChecked="changeChecked"
          :type='type'
        ></check-list>
      </div>
      <div class="inspection-item">
        <div class="item-title">{{ titleMap[2] }}</div>
        <check-list
          class="check-scroll customScrollBar"
          :options="options3"
          :checked="checked3"
          :isShowCheckAll="false"
          :isShowCheck="isDetail"
          :level="3"
          @changeChecked="changeChecked"
          :type='type'
        ></check-list>
      </div>
    </div>
  </div>
</template>

<script>
import checkList from './checkList';
export default {
  name: 'inspection',
  data() {
    return {
      options1: [],
      checked1: [],
      options2: [],
      checked2: [],
      options3: [],
      checked3: [],
      isDetail: true,
      data: []
    };
  },
  props: {
    titleMap: {
      type: Array,
      default: () => ['一级巡检项目', '二级巡检项目', '三级巡检项目']
    },
    checkMap: {
      type: Array,
      default: () => []
    },
    quickCheck: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'xj'
    },
  },
  components: {
    checkList
  },
  computed: {
    A1() {
      return this.isCheck('A1');
    },
    A2() {
      return this.isCheck('A2');
    },
    A3() {
      return this.isCheck('A3');
    },
    A4() {
      return this.isCheck('A4');
    }
  },
  methods: {
    isCheck(cat) {
      let flag = false;
      for (const item of this.options1) {
        if (item.categorySuffix&&item.categorySuffix.split('.').includes(cat)) {
          if (!this.checked1.map(i => i.id).includes(item.id)) {
            return false;
          } else {
            flag = true;
          }
        }
      }
      for (const item of this.options2) {
        if (item.categorySuffix&&item.categorySuffix.split('.').includes(cat)) {
          if (!this.checked2.map(i => i.id).includes(item.id)) {
            return false;
          } else {
            flag = true;
          }
        }
      }
      for (const item of this.options3) {
        if (item.categorySuffix&&item.categorySuffix.split('.').includes(cat)) {
          if (!this.checked3.map(i => i.id).includes(item.id)) {
            return false;
          } else {
            flag = true;
          }
        }
      }
      return flag;
    },
    checkChange(cat,visible){
    let flag =false
      for (const item of this.options1) {
        if (
          item.categorySuffix &&
          item.categorySuffix.split('.').includes(cat)
        ) {
          if (visible) {
            if (!this.checked1.map(i => i.id).includes(item.id)) {
              this.checked1.push(item);
              flag = true
            }
          } else {
            let index = this.checked1.findIndex(i => i.id === item.id);
            if (index > -1) {
              this.checked1.splice(index, 1);
            }
          }
        }
      }
      for (const item of this.options2) {
        if (
          item.categorySuffix &&
          item.categorySuffix.split('.').includes(cat)
        ) {
          if (visible) {
            if (!this.checked2.map(i => i.id).includes(item.id)) {
              this.checked2.push(item);
              flag = true
            }
          } else {
            let index = this.checked2.findIndex(i => i.id === item.id);
            if (index > -1) {
              this.checked2.splice(index, 1);
            }
          }
        }
      }
      for (const item of this.options3) {
        if (
          item.categorySuffix &&
          item.categorySuffix.split('.').includes(cat)
        ) {
          if (visible) {
            if (!this.checked3.map(i => i.id).includes(item.id)) {
              this.checked3.push(item);
              flag = true
            }
          } else {
            let index = this.checked3.findIndex(i => i.id === item.id);
            if (index > -1) {
              this.checked3.splice(index, 1);
            }
          }
        }
      }
      if(!flag&&visible){
        this.$message.error(`没有${cat}项`)
      } 
    },
    handelData(data) {
      for (let i = 0; i < data.length; i++) {
        this['options' + Number(data[i].level)].push({
          ...data[i]
        });
        if (data[i].children && data[i].children.length > 0) {
          this.handelData(data[i].children);
        }
      }
    },
    handelCheck(data, index) {
      for (let i = 0; i < data.length; i++) {
        if (this.checkMap.length) {
          if (this.checkMap.includes(data[i].id)) {
            this['checked' + index].push(data[i]);
          }
        } else {
          if (data[i].selected) {
            this['checked' + index].push(data[i]);
          }
        }
      }
    },
    show(val) {
      this.options1 = [];
      this.options2 = [];
      this.options3 = [];
      this.checked1 = [];
      this.checked2 = [];
      this.checked3 = [];
      console.log(val);
      this.isDetail = val == 'detail' ? false : true;
      this.handelData(this.data);
      for (let i = 1; i < 4; i++) {
        this.handelCheck(this['options' + i], i);
      }
    },
    changeChecked(val, level) {
      if (level == 1) {
        this.checked1 = val;
      } else if (level == 2) {
        this.checked2 = val;
      } else if (level == 3) {
        this.checked3 = val;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.inspection {
  display: flex;
  height: 100%;
  justify-content: space-between;
}
.inspection-item {
  width: 32%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 30px 20px;
  // flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  // margin-right: 20px;
}
.item-title {
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: left;
}
.check-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
}
.customScrollBar {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
<style>
.el-theme1 .inspection .el-checkbox {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
  margin-right: 0;
  display: flex;
  align-items: center;
}
</style>
